
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Data from "./components/data"
import geojson from "./utils/geojson"
import { Layout, Menu, Breadcrumb } from 'antd';
import {
  // DesktopOutlined,
  // PieChartOutlined,
  HomeOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

class SiderDemo extends React.Component {
  child
  state = {
    collapsed: false,
    twoSpan: 12,
    threeSpan: 12
  };

  onRef = (ref) => {
    this.child = ref
  }

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  // 二维
  showOnlyTwo = () => {
    this.setState({
      twoSpan: 24,
      threeSpan: 0
    })
    this.child.showOnlyTwo()

  }
  // 三维
  showOnlyThree = () => {
    this.setState({
      twoSpan: 0,
      threeSpan: 24
    })
  }
  // 一体化
  showAll = () => {
    this.setState({
      twoSpan: 12,
      threeSpan: 12
    })
    this.child.showOnlyTwo()
  }

  // 关闭同步
  notSame = () => {
    this.child.notSame()
  }
  // 开启同步
  same = () => {
    this.child.same()
  }

  render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1" icon={<HomeOutlined />}>主页
            </Menu.Item>
            <Menu.Item key="2" icon={<FileOutlined />} onClick={geojson}>
              图层
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="一体化">
              <Menu.Item key="3" onClick={this.showOnlyTwo}>二维</Menu.Item>
              <Menu.Item key="4" onClick={this.showOnlyThree}>三维</Menu.Item>
              <Menu.Item key="5" onClick={this.showAll}>一体化</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="视点同步">
              <Menu.Item key="6" onClick={this.same}>开</Menu.Item>
              <Menu.Item key="8" onClick={this.notSame}>关</Menu.Item>
            </SubMenu>
            {/* <Menu.Item key="9" icon={<FileOutlined />}>
              Files
            </Menu.Item> */}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>二三维一体化GIS平台  </Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <Data onRef={this.onRef}
                data={this.state}
              />
            </div>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

ReactDOM.render(<SiderDemo />, document.getElementById('root'));
